/**
 * useLayoutEffect 会在 浏览器 layout 之后，painting 之前执行,早于useEffect
 * 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect
 * 可以使用它来读取 DOM 布局并同步触发重渲染
 * 在浏览器执行绘制之前 useLayoutEffect 内部的更新计划将被同步刷新
 */
import React, { useEffect, useState, useLayoutEffect } from 'react';
import { Button } from 'antd-mobile';

function LayoutEffectCom() {
  const [color, setColor] = useState('red');
  useEffect(() => {
    console.log('useEffect===', color);
    return () => {
      console.log('clear useEffect===', color);
    };
  }, [color]);

  useLayoutEffect(() => {
    console.log('useLayoutEffect1===', color);
    setColor('orange');
    console.log('useLayoutEffect2===', color);
  }, [color]);
  return (
    <div>
      <Button style={{ color: color }} onClick={() => setColor('green')}>
        {color}
      </Button>
      <Button style={{ color: color }} onClick={() => setColor('yellow')}>
        {color}
      </Button>
    </div>
  );
}
export default LayoutEffectCom;
